import ElMenu from './ElMenu.vue'
import ElMenuItem from './ElMenuItem.vue'
import ElSubmenu from './ElSubmenu.vue'

export default {
  props: {
    data: {
      type: Array
    }
  },
  render() {
    const renderChildren = (data) => {
      return data.map((child) => {
        return child.children ? (
          <ElSubmenu>
            <template slot="title">{child.title}</template>
            {renderChildren(child.children)}
          </ElSubmenu>
        ) : (
          <ElMenuItem
            nativeOnClick={() => {
              alert(child.title)
            }}
          >
            {child.title}
          </ElMenuItem>
        )
      })
    }
    return <ElMenu>{renderChildren(this.data)}</ElMenu>
  }
}
